<template>
  <div>
    <!-- 点击该按钮让其key发生变化 -->
    <el-button @click="btn">key强制刷新</el-button>
    <h1>test key发生变化</h1>
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  beforeCreate() {
    console.log("key beforeCreate");
  },
  created() {
    console.log("key created");
  },
  beforeMount() {
    console.log("key beforeMount");
  },
  mounted() {
    console.log("key mounted");
  },
  beforeUpdate() {
    console.log("key beforeUpdate");
  },
  updated() {
    console.log("key updated");
  },
  beforeDestroy() {
    console.log("key beforeDestroy");
  },
  destroyed() {
    console.log("key destroyed");
  },
  methods: {
    btn() {
      // Symbol()不重复的唯一的值
      this.$emit("resetKey", Symbol());
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
}
</style>